<template>
    <div class="charts-four-box" :style="{ width: '100%', height: '335px' }">
        <div class="left-box">
            <div class="left-box-charts" ref="chartsFourOne"></div>
            <div class="left-box-charts" ref="chartsFourTwo"></div>
        </div>
        <div class="right-box" v-if="piedataAll.length">
            <div class="table-title">
                <div class="column-one"></div>
                <div class="column-two">计划</div>
                <div class="column-three">实际</div>
            </div>
            <div class="table-row" v-for="(item, index) in piedataAll" :key="index">
                <div class="row-one">
                    <div class="row-one-icon" :style="{ background: piecolorList[index] }"></div>
                    <div class="row-one-text" :title="item.name">{{ item.name }}</div>
                </div>
                <div class="row-two row-text">{{ item.value }}</div>
                <div class="row-three row-text">{{ item.value2 }}</div>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    name: 'ChartsFour',
    data() {
        return {
            chartsOne: null,
            chartstwo: null,
            piedata: [
                { value: 1000, name: '战新产业部' },
                { value: 1000, name: '市场营销中心' },
                { value: 333, name: '智能装备中心' },
                { value: 133, name: '数字控制中心' },
                { value: 133, name: '绿色低碳中心' },
                { value: 133, name: '设备共享中心' },
                { value: 133, name: '无人驾驶机器人' },
                { value: 133, name: '技术开发部' },
            ],
            piedataNum: 10000,
            piedataTwo: [
                { value: 1000, name: '战新产业部' },
                { value: 1000, name: '市场营销中心' },
                { value: 333, name: '智能装备中心' },
                { value: 133, name: '数字控制中心' },
                { value: 133, name: '绿色低碳中心' },
                { value: 133, name: '设备共享中心' },
                { value: 133, name: '无人驾驶机器人' },
                { value: 133, name: '技术开发部' },
            ],
            piedataTwoNum: 9000,
            piedataAll: [
                { value: 1000, value2: 1000, name: '战新产业部' },
                { value: 1000, value2: 1000, name: '市场营销中心' },
                { value: 333, value2: 333, name: '智能装备中心' },
                { value: 133, value2: 133, name: '数字控制中心' },
                { value: 133, value2: 133, name: '绿色低碳中心' },
                { value: 133, value2: 133, name: '设备共享中心' },
                { value: 133, value2: 133, name: '无人驾驶机器人' },
                { value: 133, value2: 133, name: '技术开发部' },
            ],
            piecolorList: ['#85D5CF', '#1764E8', '#FFA319', '#80E8FF', '#9787CF', '#1AD09A', '#CF8789', '#D0CC3F'],
        };
    },
    watch: {
        chartData: {
            handler(newVal) {
                console.log('chartData changed:', newVal);
                this.updateChart();
            },
            deep: true,
        },
    },
    mounted() {
        this.initChart();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        if (this.chartsOne) {
            this.chartsOne.dispose();
        }
        if (this.chartstwo) {
            this.chartstwo.dispose();
        }
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        initChart() {
            this.chartsOne = echarts.init(this.$refs.chartsFourOne);
            this.chartstwo = echarts.init(this.$refs.chartsFourTwo);
            this.updateChart();
            this.updateChartTwo();
        },
        updateChart() {
            let option = {
                title: {
                    text: `{a|${this.piedataNum}}`,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#000A3A',
                                fontSize: 18,
                                height: 20,
                                lineHeight: 20,
                                fontWeight: 'bold',
                                // lineHeight: 1
                            },
                        },
                    },
                    subtext: '年度计划总计',
                    subtextStyle: {
                        color: '#6D6F7B',
                        fontSize: 13,
                        lineHeight: 6,
                        height: 16,
                    },
                    left: 'center',
                    top: '35%',
                },
                color: this.piecolorList,
                tooltip: {
                    trigger: 'item',
                    borderWidth: 0,
                    formatter: function (param) {
                        return (
                            '<div><p>' +
                            param.marker +
                            param.name +
                            '</p><p style="font-family: DIN, DIN;font-weight: bold;text-align: center;font-size: 13px;color:' +
                            param.color +
                            '"><span style="margin-right:8px;margin-left:12px">' +
                            param.value +
                            '</span></span>' +
                            param.percent +
                            '%' +
                            '</p></div>'
                        );
                    },
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    top: '10%',
                    right: '120',
                    icon: 'rect',
                    itemWidth: 8,
                    itemHeight: 8,
                    itemGap: 16,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: ['70%', '90%'],
                        padAngle: 2,
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },

                        labelLine: {
                            show: false,
                        },
                        data: [],
                    },
                    {
                        type: 'pie',
                        hoverAnimation: false,
                        center: ['50%', '50%'],
                        radius: ['64%', '68%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        tooltip: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            {
                                value: 100,
                                itemStyle: {
                                    color: '#A3CAEB',
                                },
                            },
                        ],
                    },
                ],
            };
            option.series[0].data = this.piedata;
            this.chartsOne.setOption(option);
        },
        updateChartTwo() {
            let option = {
                title: {
                    text: `{a|${this.piedataTwoNum}}`,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#000A3A',
                                fontSize: 18,
                                height: 20,
                                lineHeight: 20,
                                fontWeight: 'bold',
                                // lineHeight: 1
                            },
                        },
                    },
                    subtext: '年度实际总计',
                    subtextStyle: {
                        color: '#6D6F7B',
                        fontSize: 13,
                        lineHeight: 6,
                        height: 16,
                    },
                    left: 'center',
                    top: '35%',
                },
                color: this.piecolorList,
                tooltip: {
                    trigger: 'item',
                    borderWidth: 0,
                    formatter: function (param) {
                        return (
                            '<div><p>' +
                            param.marker +
                            param.name +
                            '</p><p style="font-family: DIN, DIN;font-weight: bold;text-align: center;font-size: 13px;color:' +
                            param.color +
                            '"><span style="margin-right:8px;margin-left:12px">' +
                            param.value +
                            '</span></span>' +
                            param.percent +
                            '%' +
                            '</p></div>'
                        );
                    },
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    top: '10%',
                    right: '120',
                    icon: 'rect',
                    itemWidth: 8,
                    itemHeight: 8,
                    itemGap: 16,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: ['70%', '90%'],
                        padAngle: 2,
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },

                        labelLine: {
                            show: false,
                        },
                        data: [],
                    },
                    {
                        type: 'pie',
                        hoverAnimation: false,
                        center: ['50%', '50%'],
                        radius: ['64%', '68%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        tooltip: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            {
                                value: 100,
                                itemStyle: {
                                    color: '#A3CAEB',
                                },
                            },
                        ],
                    },
                ],
            };
            option.series[0].data = this.piedataTwo;
            this.chartstwo.setOption(option);
        },
        handleResize() {
            if (this.chartsOne) {
                this.chartsOne.resize();
            }
            if (this.chartstwo) {
                this.chartstwo.resize();
            }
        },
    },
};
</script>
<style scoped>
.charts-four-box {
    width: 100%;
    height: 100%;
    display: flex;
}
.left-box {
    width: 239px;
    height: 100%;
}
.left-box-charts {
    width: 100%;
    height: 50%;
}
.right-box {
    width: calc(100% - 159px);
    height: 100%;
    padding-right: 39px;
}
.table-title {
    display: flex;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.column-one {
    width: 50%;
}
.column-two {
    width: 25%;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 12px;
    color: #0db365;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.column-three {
    width: 25%;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 12px;
    color: #1764e8;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.table-row {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
}
.row-one {
    width: 50%;
    padding-left: 20px;
    display: flex;
    align-items: center;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 12px;
    color: #484a52;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.row-one-icon {
    width: 8px;
    height: 8px;
    margin-right: 4px;
}
.row-one-text {
    width: calc(100% - 12px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.row-two {
    width: 25%;
}
.row-three {
    width: 25%;
}
.row-text {
    font-family: DIN, DIN;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    font-style: normal;
    text-transform: none;
}
.table-row:nth-child(even) {
    background: #f5f6f9;
}
</style>
